<template>
	<div id="home">
		<!-- <slot name='choice'></slot> -->
		<!-- <slot name='nav' sss="123"></slot> -->
		<div class="navigation">
			<myheader @searchDel="searchDel"></myheader>
			<navs :sss="123"></navs>
			<search @searchDel="searchDel" :word="params.word"   v-if="isSearch"></search>
		</div>
		<div class="content">
			<div class="contentLeft">
				<searchBtm @search="search" :word="params.word"></searchBtm>
				<tabs :contentCntStatistics="contentCntStatistics" :contentPage="contentPage" :word="params.word"
				
					@search="tabsSearch"></tabs>
				<newsList :contentPage="contentPage" :word="params.word" @search="pageChange"></newsList>

			</div>
			<div class="contentRight">
				<hotSearch  @search="search"></hotSearch>
				<hotSort :titleObj='titleObj_list'></hotSort>
			</div>
		</div>

		<contact></contact>
		<information></information>
		<backtop @goTop='goTop'></backtop>
	</div>
</template>

<script>
	import { defineAsyncComponent } from 'vue';
	// import myheader from '../components/header/header.vue'
	// import navs from '../components/header/nav.vue'
	// import search from '../components/header/search.vue'
	// import searchBtm from '../components/searchPage/search.vue'
	// import tabs from '../components/searchPage/tabs.vue'
	// import newsList from '../components/searchPage/newsList.vue'
	// import hotSearch from '../components/searchPage/hotSearch.vue'
	// import hotSort from '../components/newsChannel/hotSort.vue';
	// import contact from '../components/footer/contact.vue'
	// import information from '../components/footer/information.vue'
	// import backtop from '../components/footer/backtop.vue'
	export default {
		components: {
			myheader:defineAsyncComponent(() => import(rootPath+'/src/components/header/header.vue')),
			navs:defineAsyncComponent(() => import(rootPath+'/src/components/header/nav.vue')),
			search:defineAsyncComponent(() => import(rootPath+'/src/components/header/header.vue')),
			searchBtm:defineAsyncComponent(() => import(rootPath+'/src/components/searchPage/search.vue')),
			tabs:defineAsyncComponent(() => import(rootPath+'/src/components/searchPage/tabs.vue')),
			newsList:defineAsyncComponent(() => import(rootPath+'/src/components/searchPage/newsList.vue')),
			hotSearch:defineAsyncComponent(() => import(rootPath+'/src/components/searchPage/hotSearch.vue')),
			hotSort:defineAsyncComponent(() => import(rootPath+'/src/components/newsChannel/hotSort.vue')),
			contact:defineAsyncComponent(() => import(rootPath+'/src/components/footer/contact.vue')),
			information:defineAsyncComponent(() => import(rootPath+'/src/components/footer/information.vue')),
			backtop:defineAsyncComponent(() => import(rootPath+'/src/components/footer/backtop.vue'))
		},
		data() {
			return {
				isSearch: false,
				params: {
					pageSize: 10,
					
				},
				contentCntStatistics: [{
					channelId: null,
					channelName: '全部'
				}],
				contentPage: {},
				titleObj_list: {
					'title': '热点排行',
					'title_icon': 'icon-Refresh-one',
					'actionName': '换一换 '
				}
			}
		},
	created() {
		this.params.word = this.GetQueryString('word')
		this.fetchContentSearchPage()
	},
		methods: {

			goTop() {
				let ele = document.querySelector('#app');
				this.scrollToTop(ele);
			},
			// *滚动条回到顶部**/
			scrollToTop(el) {
				const cubic = (value) => Math.pow(value, 3);
				const easeInOutCubic = (value) => value < 0.5 ? cubic(value * 2) / 2 : 1 - cubic((1 - value) * 2) / 2;
				console.log(el, 99999)
				if (!el) return
				const beginTime = Date.now()
				const beginValue = el.scrollTop;
				const frameFunc = () => {
					if (!el) return
					const progress = (Date.now() - beginTime) / 500;
					if (progress < 1) {
						el.scrollTop = beginValue * (1 - easeInOutCubic(progress))

						requestAnimationFrame(frameFunc)
					} else {
						el.scrollTop = 0
					}
				}
				requestAnimationFrame(frameFunc)
			},
			searchDel(val) {
				this.isSearch = val
			},
			search(val) {
				this.params.word = val
				this.fetchContentSearchPage(val)

			},
			GetQueryString(name) {
				var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
				var r = window.location.search.substr(1).match(reg); //获取url中"?"符后的字符串并正则匹配
				var context = "";
				if (r != null)
					context = decodeURIComponent(r[2]);
				reg = null;
				r = null;
				return context == null || context == "" || context == "undefined" ? "" : context;
			},
			tabsSearch(data) {
				this.fetchContentSearchPage(data)
			},
			pageChange(val){
				this.params.pageNum=val 
				this.fetchContentSearchPage()
			},
			fetchContentSearchPage(data) {
				let params = JSON.parse(JSON.stringify(this.params));
				console.log(params, '21321')
				if(data && typeof data == 'object'){
					console.log(data, '4123213')
					params = Object.assign({}, params, data);
				}
				console.log(params, 'params');
				this.contentCntStatistics = [{
					channelId: null,
					channelName: '全部'
				}]
				contentApi.fetchContentSearchPage(params, (res) => {
					if (res.code == "00000 00000") {
						this.contentPage = res.data.contentPage
						this.contentCntStatistics.push(...res.data.contentCntStatistics)
					} else {

					}
				})
			},
		}
	}
</script>

<style scoped>
	#home {
	  height: fit-content;
	  overflow: auto;
	}
	#home .navigation {
	  width: 100%;
	 
	}
	#home .content {
	  width: 100%;
	  margin-top: 40px;
	  background-color: #fff;
	  display: flex;
	  justify-content: center;
	}
	#home .content .routerNav {
	  width: 840px;
	  height: 14px;
	  font-size: 14px;
	  font-weight: 400;
	  color: #999999;
	}
	#home .content .contentLeft {
	  width: 840px;
	}
	#home .content .contentRight {
	  margin-top: 70px;
	  width: 360px;
	  margin-left: 40px;
	}
	#home .hotspot {
	  margin-left: 40px;
	}

</style>
<style>
	.mhover :hover {
			color: #Ff3333 !important;
			cursor: pointer;
		}
</style>